<template>
  <div class="pagination">
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
      v-if="total !== 0"
    />
  </div>
</template>
 <script setup>
import { ref } from "vue";
import { useOrdersStore } from "@/stores/order";
import { orderListService } from "@/api/order";
import { ElMessage } from "element-plus";
// 初始化分页相关的数据
const pageSize = ref(5); // 每页显示的数量
const total = ref(0); // 总记录数
const currentPage = ref(1); // 当前页码
// 使用 Pinia Store
const ordersStore = useOrdersStore();
// 获取订单数据
const fetchOrders = async (
  params = { pageNum: currentPage.value, pageSize: pageSize.value }
) => {
  try {    
    const response = await orderListService(params);
    if (response.code === 0) {
      ordersStore.setOrders(response.data);
      total.value = response.data.total;
      currentPage.value = response.data.current;
      pageSize.value = response.data.size;
    } else {
      console.error("请求失败:", response.message || "未知错误");
    }
  } catch (error) {
    ElMessage.error("请求失败，请稍后再试");
  }
};

// 分页改变时的处理函数
const handleCurrentChange = async (val) => {
  currentPage.value = val; // 确保 currentPage 被同步
  await fetchOrders({ pageNum: val, pageSize: pageSize.value }); // 使用正确的参数名
};
fetchOrders({ pageNum: currentPage.value, pageSize: pageSize.value });
</script>
 <style lang="scss" scoped>
.pagination {
  display: flex;
  // justify-content: center; // 使用 Flexbox 居中
  margin-top: 50px;
  .el-pagination {
    // 根据需要调整样式
    width: auto; // 自适应宽度
    height: auto; // 自适应高度
  }
}
</style>